<template>
  <div id="realTimeAlarm">
    <div class="boxTable" style="display: inline-block">
      <div class="navTable">
        <table class="tableBtn">
          <tr class="btnNav">
            <td style="width: 30px;text-align: center">
              <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>-->
            </td>
            <td style="width: 150px;color: #909399;font-weight: bold">
              <span>来源</span>
            </td>
            <td style="width: 175px;color: #909399;font-weight: bold">
              <span>机构</span>
            </td>
            <td style="width: 185px;color: #909399;font-weight: bold">
              <span>标题</span>
            </td>
            <td style="width: 183px;color: #909399;font-weight: bold">
              <span>时间</span>
              <img class="sort" :src="sequence" ref="sort4" @click="sortTable('sort4')"/>
            </td>
            <td style="width: 15px"></td>
          </tr>
        </table>
      </div>
      <ul class="dataBody">
        <li class="alarmBody clearfix" v-for="(item, index) in courseSubList" :key="item.id">
          <el-checkbox :checked="checkAll" v-model="item.check" style="text-indent: 4px" ref="checkAll" @change="handleCheckAllChange(item, index, courseSubList)"></el-checkbox>
          <div style="padding-left: 14px" class="alarmTitle">
            <div class="leftIcon" @click="showHide(index)" >
              <i class="el-icon-caret-right" ref="arrow"></i>
            </div>
            <div class="rightTitle">
              <!--<span class="alarmDate">{{index+1}}</span>-->
              <span class="alarmDate">{{item.date}}({{item.total}})</span>
            </div>
          </div>
          <div ref="child" style="display: none" class="alarmContent">
            <div v-for="(inner, data) in item.msg" class="contentContent">
              <!--<el-checkbox-group v-model="warningID" @change="handleCheckedWarningIdChange(inner.id)">-->
              <!--<el-checkbox ></el-checkbox>-->
              <!--</el-checkbox-group>-->
              <el-checkbox style="text-indent: 4px" v-model="inner.check" ref="checkBox" @change="handleCheckedWarningIdChange(inner, item, inner.id)" name="warningID"></el-checkbox>
              <div @click='getTest(inner)' style="display: inline-block">
                <span style="margin-left: 17px; vertical-align: middle" class="body-l-name">
                  <i v-if="inner.reading === 1" class="circle" style="border: 5px solid #999999;"></i>
                  <i v-if="inner.reading === 0" class="circle" style="border: 5px solid #47AF41;"></i>
                </span>
                <span style="margin-left: 16px; width: 106px" class="textHidden body-l-name">{{inner.equip_cid}}</span>
                <span style="width: 170px" class="textHidden body-l-name">{{inner.fittings_type_label}}</span>
                <span style="width: 180px" class="textHidden body-l-name">{{inner.title}}</span>
                <span style="vertical-align: middle" class="body-l-name">{{inner.remind_time}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="tableBottomBtn clearfix">
        <el-checkbox v-model="checkAll" @change="CheckAllChange(checkAll)" style="margin-left: 10px"></el-checkbox>
        <el-button @click="markDel" type="danger" class="bottomBtn">删除</el-button>
        <el-button @click="markRead" type="danger" class="bottomBtn">标记已读</el-button>
        <el-button @click="allRead" type="danger" class="bottomBtn">全部已读</el-button>
      </div>
    </div>
    <div class="boxContent">
      <div class="boxTitle">
        <h3>{{contentForm.remind_content}}</h3>
      </div>
      <div class="dataContent clearfix">
        <div class="contentLeft" v-show="contentShow">
          <div class="contentInfo1" >
            <el-row>
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  编号：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.equip_cid}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="false">
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  地址：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.addr}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  发生时间：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.remind_time}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  机构：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.fittings_type_label}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  测点名称：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.fittings_name}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  发生次数：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.cumulative}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4" style="text-align: left">
                <div class="grid-content bg-purple">
                  提醒内容：
                </div>
              </el-col>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <span>{{contentForm.remind_content}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="contentRight">
          <div class="showImg" v-show="contentForm.reading === 1">
            <img :src="readed">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import readed from '@/assets/messageCenter/readed.png'
  import sequence from '@/assets/messageCenter/sequence.png'
  import normal from '@/assets/messageCenter/normal.png'
  import inverted from '@/assets/messageCenter/inverted.png'

  export default {
    data() {
      return {
        readed,
        sequence,
        normal,
        inverted,
        // 列表
        courseSubList: [],
        // 内容显示
        contentShow: false,
        contentForm: {},
        // 多选
        checkAll: false,
        checkBox: false,
        allReadID: [],
        warningID: [],
        // isIndeterminate: true,
        // checkedAll: false,
        // ifALL: false,
        // 总览接口
        fittingData: {
          access_token: localStorage.getItem('access_token'),
          type: 'remind_fittings_get'
        },
        // 消息已读接口
        fittingRead: {
          access_token: localStorage.getItem('access_token'),
          type: 'remind_fittings_reading',
          ids: []
        },
        // 删除接口
        fittingDel: {
          access_token: localStorage.getItem('access_token'),
          type: 'remind_fittings_del',
          ids: []
        }
      }
    },
    //    mounted() {
    //      this.getWarning()
    //      console.log(localStorage.getItem('access_token'))
    //    },
    //    init() {
    //      console.log('zz')
    //      alert('zz')
    //    },
    methods: {
      // 排序图标变化
      sortTable(val) {
        if (val === 'sort4') {
          if (this.$refs.sort4.src === inverted) {
            this.$refs.sort4.src = sequence
            this.courseSubList.reverse()
          } else {
            this.$refs.sort4.src = inverted
            this.courseSubList.reverse()
          }
        } else {
          this.$refs.sort4.src = sequence
        }
      },
      // 初始化数据
      intData() {
        this.contentForm = {}
        this.allReadID = []
        this.contentShow = false
      },
      // 删除
      markDel() {
        this.fittingDel.ids = this.warningID
        axios.post('/remind/fittings', this.fittingDel, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.getFitting()
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 标记已读
      markRead() {
        this.fittingRead.ids = this.warningID
        axios.post('/remind/fittings', this.fittingRead, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.getFitting()
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 全部已读
      allRead() {
        this.fittingRead.ids = this.allReadID
        axios.post('/remind/fittings', this.fittingRead, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.getFitting()
          this.courseSubList.forEach(item => {
            item.check = false
            item.msg.forEach(inner => {
              console.log(inner.id)
              inner.check = false
            })
          })
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 获取行数据
      getTest(inner) {
        console.log(inner)
        let oRead = 1
        inner.reading = oRead
        this.contentForm = inner
        this.contentShow = true
        this.fittingRead.ids.push(inner.id)
        axios.post('/remind/fittings', this.fittingRead, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 全局全选
      CheckAllChange(checkAll) {
        console.log(checkAll)
        if (checkAll === true) {
          let getAllId = []
          this.courseSubList.forEach(item => {
            item.check = true
            item.msg.forEach(inner => {
              getAllId.push(inner.id)
              console.log(inner.id)
              inner.check = true
              console.log(getAllId)
            })
          })
          for (let i = 0; i < getAllId.length; i++) {
            for (let j = 0; j < this.warningID.length; j++) {
              if (this.warningID[j] === getAllId[i]) {
                this.warningID.splice(j, 1)
                j--
              }
            }
          }
          console.log(getAllId)
          this.warningID = this.warningID.concat(getAllId)
          console.log(this.warningID)
        } else if (checkAll === false) {
          let cancelAll = []
          this.courseSubList.forEach(item => {
            item.check = false
            item.msg.forEach(inner => {
              cancelAll.push(inner.id)
              console.log(inner.id)
              inner.check = false
              console.log(cancelAll)
            })
          })
          for (let i = 0; i < cancelAll.length; i++) {
            for (let j = 0; j < this.warningID.length; j++) {
              if (this.warningID[j] === cancelAll[i]) {
                this.warningID.splice(j, 1)
                j--
              }
            }
          }
          console.log(this.warningID)
        }
      },
      // 多选全选
      handleCheckAllChange(item, index, data) {
        console.log(item.check)
        console.log(index)
        console.log(data)
        if (item.check === true) {
          // 全选时
          let getTrueId = []
          // this.warningID = []
          this.courseSubList[index].msg.forEach(inner => {
            getTrueId.push(inner.id)
            inner.check = true
          })
          for (let i = 0; i < getTrueId.length; i++) {
            for (let j = 0; j < this.warningID.length; j++) {
              if (this.warningID[j] === getTrueId[i]) {
                this.warningID.splice(j, 1)
                j--
              }
            }
          }
          console.log(getTrueId)
          this.warningID = this.warningID.concat(getTrueId)
          console.log(this.warningID)
        } else if (item.check === false) {
          let getFalseId = []
          this.courseSubList[index].msg.forEach(inner => {
            getFalseId.push(inner.id)
            inner.check = false
            // console.log(getFalseId)
            // console.log(inner)
          })
          for (let i = 0; i < getFalseId.length; i++) {
            for (let j = 0; j < this.warningID.length; j++) {
              if (this.warningID[j] === getFalseId[i]) {
                this.warningID.splice(j, 1)
                j--
              }
            }
          }
          console.log(this.warningID)
        }
        let oNum = 0
        for (let i = 0; i < data.length; i++) {
          if (data[i].check === true) {
            oNum++
            if (oNum === data.length) {
              this.checkAll = true
            }
          } else if (data[i].check === undefined || data[i].check === false) {
            this.checkAll = false
          }
        }
        // console.log(this.courseSubList)
        console.log(data.length)
        console.log(this.courseSubList.length)
        this.courseSubList = [...this.courseSubList]
      },
      handleCheckedWarningIdChange(inner, item, val) {
        console.log(inner)
        console.log(item)
        let oNum = 0
        for (let i = 0; i < item.msg.length; i++) {
          console.log(item.msg[i].check)
          if (item.msg[i].check === true) {
            oNum++
            console.log(oNum)
            if (oNum === item.msg.length) {
              item.check = true
            }
          } else if (item.msg[i].check === undefined || item.msg[i].check === false) {
            item.check = false
          }
        }
        let aId = this.warningID.indexOf(val)
        if (aId >= 0) {
          // 如果已经包含就去除
          this.warningID.splice(aId, 1)
        } else {
          // 如果没有包含就添加
          this.warningID.push(val)
        }
        this.courseSubList = [...this.courseSubList]
        console.log(this.warningID)
      },
      // 获取预警
      getFitting() {
        axios.post('/remind/fittings', this.fittingData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          let oData = []
          for (let i = 0; i < res.data.datas.length; i++) {
            res.data.datas[i]['check'] = false
            console.log(res.data.datas[i])
            for (let j = 0; j < res.data.datas[i].msg.length; j++) {
              res.data.datas[i].msg[j]['check'] = false
              let oWId = res.data.datas[i].msg[j].id
              this.allReadID.push(oWId)
              oData = res.data.datas
            }
          }
          this.courseSubList = oData
          console.log(oData)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      showHide(index) {
        if (this.$refs.child[index].style.display === 'none') {
          this.$refs.child[index].style.display = 'block'
          this.$refs.arrow[index].className = 'el-icon-caret-bottom'
        } else {
          this.$refs.child[index].style.display = 'none'
          this.$refs.arrow[index].className = 'el-icon-caret-right'
        }
      }
    }
  }
</script>

<style scoped>
  /***********排序变化**********/
  .sort{
    display: inline-block;
    width: 8px;
    height: 11px;
    margin-left: 4px;
    cursor: pointer;
  }
  /*******初始化******/
  ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .clearfix:after{
    display: block;
    content: '';
    clear: both;
  }
  h3{
    padding:0 0 0 20px;
    margin: 0;
    line-height: 41px;
  }
  /*************最外层***************/
  #realTimeAlarm{
    min-width: 1700px;
    height: 100%;
    margin: 0 20px;
    color: #000;
    font-size: 14px;
    background-color: #fff;
  }
  /***********左边内容**********/
  .boxContent{
    min-width: 980px;
    height: 100%;
    float: right
  }
  .boxTitle{
    height: 41px;
    width: inherit;
    border-bottom: 1px solid #e0e0e0
  }
  .dataContent{
    width: inherit;
    height: 400px;
  }
  .contentLeft{
    width: 70%;
    float: left;
    padding: 20px 0 0 20px;
    height: inherit;
  }
  .contentRight{
    width: 30%;
    padding: 20px 20px 0 0;
    float: right;
  }
  .showImg{
    float: right;
  }
  /deep/ .el-row{
    padding-bottom: 20px;
  }
  /***********列表样式***********/
  li.alarmBody{
    width: 720px;
    min-height: 30px;
    border-bottom: 1px solid #e0e0e0;
  }
  .alarmContent{
    width: inherit;
    min-height: 40px;
  }
  .contentContent{
    width: 720px;
    line-height: 39px;
    border-top: 1px solid #efefef;
  }
  .contentContent:hover{
    background: #bdeeff;
    cursor: pointer;
  }
  .contentContent:nth-child(1){
    border-top: 1px solid #e0e0e0;
  }
  .leftIcon{
    float: left;
  }
  .alarmTitle{
    line-height: 30px;
    display: inline-flex;
  }
  .rightTitle{
    text-indent: 10px;
  }
  .tableBtn{
    width: 720px;
    height: 40px;
    border-right: 1px solid #e0e0e0;
    border-collapse:collapse;
  }
  .btnNav > td{
    text-indent: 8px;
    border-right: 1px solid #e0e0e0;
  }
  .btnNav > td:nth-child(6){
    border-right: none;
  }
  .btnNav > td:nth-child(1){
    text-indent: 0;
  }
  .dataBody{
    width: 720px;
    height: 760px;
    max-height: 760px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    border-left: none;
    border-bottom: none;
  }
  /deep/ .el-checkbox{
    width: 20px;
    display: inline-block;
  }
  .tableBottomBtn{
    width: 720px;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
  }
  .bottomBtn{
    width: 70px;
    height: 24px;
    border-radius: 4px;
    color: #fff;
    outline: none;
    border: none;
  }
  .bottomBtn:nth-child(1){
    width: 60px;
  }
  .circle{
    display: inline-block;
    height: 10px;
    /*width: 10px;*/
    border-radius: 50%;
  }
  .textHidden{
    display: inline-block;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    vertical-align: middle;
  }
  /*滚动条样式*/
  /deep/ .dataBody::-webkit-scrollbar {/*滚动条整体样式*/
    width: 14px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  /deep/ .dataBody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background: #DDDDDD;
  }
  /deep/ .dataBody::-webkit-scrollbar-track {/*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    border-radius: 0;
    background: #F5F5F5;
  }
  /deep/ .el-button {
    line-height: 0;
    padding: 12px 0;
  }
  /deep/ .el-button + .el-button{
    margin-left: 4px;
  }
</style>
